<template>
    <div class="tv-connect">
        <p class="title">请将电视/盒子与手机连在同一WiFi下</p>
        <div class="tv-connect-info">
            <div class="phone">
                <img src="~@/assets/link_remote/phone.png"/>
                <span>你的手机</span>
            </div>
            <div class="info">
                <div class="tip">
                    <div class="line">{{isBindDev?'已绑定':'未绑定'}}</div>
                </div>
                <div class="tip" :class="{'default':!isConnect}">
                    <div class="line conn">{{isConnect?'已连接':'未连接'}}</div>
                </div>
                <View class="bind" @click="handConn(isBindDev)">{{isConnect?'已连接':'点击连接'}}</View>
            </div>
            <div class="tv">
                 <img src="~@/assets/link_remote/TV.png"/>
                <span>{{isBindDev?isBindDev.body.name:'你的电视'}}</span>
            </div>
        </div>
        <div class="device-bind">
            <p class="tv-title">绑定电视</p>
            <div class="tv-input">
                <img src="~@/assets/link_remote/tv1.png"/>
                <input v-model="ip" type="text" placeholder="输入盒子/电视的IP地址"/>
                <View class="send " @click="connect">点击绑定</View>
            </div>
        </div>
        <div class="device-list">
            <p class="tv-title">我的电视</p>
            <View class="item" v-for="(item,key) of devList" :key="key" @click="handConn(item)">
                <span class="name">{{item.body.name}}</span>
                <span class="tv-check" :class="{'check':item.body&&item.body.ip==isBindDev.body.ip}">{{}}</span>
            </View>
        </div>
    </div>
    
</template>
<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import View from '../components/View'
export default {
    name:'Connect',
    components:{
        View
    },
    setup(){
        const store=useStore()
        const isConnect=computed(()=>store.state.isConnect)
        const isBindDev=store.getters.getCurrDev
        const devList=computed(()=>store.state.deviceList)
        const ip=ref('')
        const connect=()=>{
            if(ip.value.length==0||!isValidIP(ip.value)){
                return 
            }
            store.dispatch('connect',ip)
        }
        const handConn=(info)=>{
            store.dispatch('autoConnect',info)
        }
        const isValidIP=(ip)=>{
            var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
            return reg.test(ip);
        } 
        return {
            isConnect,
            ip,
            connect,
            devList,
            isBindDev,
            handConn
        }

    }

}
</script>
<style lang="stylus" scoped>
.tv-connect
    padding: 0 40px;
    .title
        font-family: PingFangSC-Regular;
        text-align: center;
        font-size: 36px;
        color: #000;
        letter-spacing: 0;
        line-height: 28px;
        margin 40px 0
    .tv-connect-info
        width: 100%;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #888;
        padding 20px 0
        .phone,.tv
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            flex 1
        .phone
            img 
                width: 72px;
                height: 142px;
                margin-bottom: 46px;
        .tv
            img 
                width: 180px;
                height: 110px;
                margin-bottom: 78px;
            span 
                display inline-block
                max-width: 180px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
        .info
            display: flex;
            flex-direction: column;
            align-items: center;
            flex 1
            .bind
                background: #fff;
                border: 2px solid #f63;
                border-radius: 36px;
                width: 224px;
                margin-top: 34px;
                font-family: PingFangSC-Regular;
                font-size: 28px;
                color: #f63;
                letter-spacing: 0;
                justify-content: center;
                height: 60px;
                display: flex;
                align-items: center;
            .line
                border-bottom: 2Px solid #11a71b;
                width: 194px;
                height: 52px;
                text-align center
                position relative
                &:before,&:after
                    content ''
                    position absolute
                    bottom -9px
                    background: #11a71b;
                    border: 2px solid #11a71b; 
                    width: 10px;
                    height: 10px;
                    position: absolute;
                    border-radius: 10px;
                &:before
                    left -14px
                &:after
                    right -14px
            .conn
                border-top: 2Px solid #11a71b;
                border-bottom 0
                margin-top: 34px;
                display: flex;
                align-items: flex-end;
                justify-content: center;
                &:before,&:after
                    top -9px
        .default
            .line
                border-bottom: 2Px dashed #999;
                &:before,&:after
                    border: 2px solid #999;
                    background transparent
            .conn
                border-top: 2Px dashed #999;
                border-bottom: 0
    .device-bind
        .tv-input
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60px;
            border: 1px solid #e6e6e6;
            border-radius: 60px;
            margin 20px 0
            img 
                height 40px
                margin 0 10px 0 20px
            input 
                border none
                outline none
                flex 1
                height 40px
            .send  
                background: #fff;
                border: 2px solid #f63;
                border-radius: 36px;
                width: 224px;
                font-family: PingFangSC-Regular;
                font-size: 28px;
                color: #f63;
                letter-spacing: 0;
                justify-content: center;
                height: 60px;
                display: flex;
                align-items: center;
                cursor pointer
.device-list
    .item
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding 20px
        border-radius 40px
        border 1px solid #e5e5e5
        margin 10px 0
        .name
            font-size 16px
        .tv-check
            border 2PX solid #e5e5e5
            height 20px
            width 20px
            border-radius 20px
        .check
            background #f63

.tv-title
    font-size: 26px;
    color: #999;
    letter-spacing: 0;
    line-height: 40px;    
        
        

</style>